import React, { Component, Fragment } from 'react';

import TabBarContainer from './TabBarstyleComp'

import { NavLink , withRouter } from 'react-router-dom'

//无状态组件，渲染底部tabbar
const Item = props => {
    return (
        <li>
            <NavLink
                to={props.path}
                activeClassName="active"
            >
                <i className={"fa fa-" + props.icon} aria-hidden="true"></i>
                <span>{props.text}</span>
            </NavLink>
        </li>
    )
}
class TabBar extends Component {

    constructor(props) {
        super(props);
        this.state = {
            tabflag:false,
            tabbars: [
                {
                    id: 1,
                    icon: 'home',
                    text: '首页',
                    path: '/home'
                },
                {
                    id: 2,
                    icon: 'th-large',
                    text: '分类',
                    path: '/classify'
                },
                {
                    id: 3,
                    icon: 'shopping-cart',
                    text: '购物车',
                    path: '/shopcar'
                },
                {
                    id: 4,
                    icon: 'user-circle',
                    text: '我的卷皮',
                    path: '/mine'
                }
            ]
        };
    }

    renderItem = () => {
        return this.state.tabbars.map(item => <Item key={item.id} {...item} />)
    }

    checkFoot = (newProps) => {
        const {pathname} = newProps && newProps.location || this.props.location
        if(pathname === './details'){
            this.state.tabflag = false
            this.setState({
                tabflag:this.state.tabflag
            })
        }else{
            this.state.tabflag = true
            this.setState({
                tabflag:this.state.tabflag
            })
        }
    }

    componentDidMount(){
        this.checkFoot()
    }

    componentWillReceiveProps(newProps){
        this.checkFoot(newProps)
    }

    render() {
        return (
            < Fragment>
                {this.state.tabflag && <TabBarContainer>
                    <ul>
                        {this.renderItem()}
                    </ul>
                </TabBarContainer>}
            </Fragment>
        );
    }
}

export default withRouter(TabBar);